<template>
  <div class="head container">
    <div class="left">
      <div class="img"/>
      <span>{{ title }}</span>
    </div>
    <router-link to="/">
      进入网站首页
      <i class="iconfont icon-angle-right"/>
      <i class="iconfont icon-angle-right"/>
    </router-link>
  </div>
</template>

<script setup
        lang="ts">
defineProps<{
  title: string
}>()
</script>

<style scoped
       lang="less">
.head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;

  .left {
    display: flex;
    align-items: flex-end;

    .img {
      width: 200px;
      height: 132px;
      background: url("../../assets/images/logo.png") no-repeat center 18px/contain;
    }

    span {
      box-sizing: unset;
      font-size: 24px;
      font-weight: 400;
      margin-left: 20px;
      margin-bottom: 38px;
      color: #666;
    }
  }

  a {
    box-sizing: unset;
    margin-bottom: 44px;
    font-size: 16px;
    color: #333333;
    display: flex;
    align-items: center;

    i {
      display: block;
      font-size: 13px;
      width: 9px;
      height: 13px;
    }
  }
}
</style>